<template>
	<view class="page">
		<image class="welcome" src="https://dcdn.it120.cc/haitangweiguang/welcome.png" mode="aspectFill"></image>
		<view class="unlock-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<i :style="{'width': endX + 'rpx'}"></i>
			<em :style="{'left': endX + 'rpx'}"></em>
			<image class="unlock-container-img" src="https://dcdn.it120.cc/haitangweiguang/welcome1.png" mode="heightFix"></image>
		</view>
</view>
	

</template>

<script>
	export default {
		data() {
		  return {
			unlockText:'滑动以开始',
		    startX: 0, // 触摸起始点x轴坐标
		    endX: 12, // 触摸结束点x轴坐标
		  }
		},
		methods: {
		  touchStart(event) {
		    this.startX = event.changedTouches[0].pageX;
		  },
		  touchMove(event) {
			if(event.changedTouches[0].pageX<=465){
				this.endX = event.changedTouches[0].pageX;
			}else{
				 this.unlock();
			}
		  },
		  touchEnd() {
			  if(this.endX==465){
				  this.unlock();
			  }else{
				  this.endX=12
			  }
		  },
		  unlock() {
			  console.log("unlock")
		    // 执行解锁操作的逻辑
		  },
		},
	}
</script>
<style scoped lang="scss">
.page{
	width: 100vw; height: auto; 
	background: url(https://dcdn.it120.cc/haitangweiguang/login_bj.png) no-repeat; background-size: 100%; background-color: #fff;
}
.welcome{
	width: 710rpx; height: 1055rpx; margin:204rpx 20rpx  100rpx; 
}
.unlock-container {
  background: #ba251e;
  width: 561rpx;
  height: 98rpx;
  box-shadow: 0px 0px 12.75px 4.25px rgba(186, 37, 30, 0.32);
  margin: 0rpx 94.5rpx 50rpx;
  position: relative;
  border-radius: 200rpx;
  overflow: hidden;
}

.unlock-container-img{
	width: 197rpx;
	height: 42rpx;
	display: block;
	position: absolute;
	top: 29rpx;
	left:196rpx;
	z-index: 2;
}


.unlock-container em{
	width: 74rpx;
	height: 74rpx;
	display: block;
	position: absolute;
	top: 12rpx;
	left:12rpx;
	background: #fff;
	border-radius: 100rpx;
	z-index: 33;
}
.unlock-container i{
	width: 12rpx;
	height: 98rpx;
	display: block;
	position: absolute;
	top: 0;
	left:0;
	background: #ba251e;
	z-index: 22;
	padding-right: 50rpx;
	box-sizing: content-box;
}


</style>
